import AigcIcon from '@/components/AigcIcon'
import AigcList from '@/components/AigcList'
import { RootSate, useAPPDispatch } from '@/store'
import { AigcListType, purchaseRecordType, rechargeRecordType } from '@/types'
import { Card, Table, TableProps, message } from 'antd'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux'

import TopUp from './TopUp'
import { aigcUpto } from '@/store/features/moneySlice'
import AigcCard from '@/components/AigcCard'
export default function MoneyView() {
  const money = useSelector((state: RootSate) => state.money)
  const moneyDispatch = useAPPDispatch()
  const blance = useRef(money.blance)
  const [modalOpen, setModalopen] = useState<boolean>(false)
  const [rechargeRecord, setRechargeRecord] = useState<rechargeRecordType[]>([])
  const [purchaseRecord, setPurchaseRecord] = useState<purchaseRecordType[]>([])
  useEffect(() => {
    /**
     * todo:rechargeRecord,purchaseRecord 远程请求更新更新
     */
    setRechargeRecord((state) => state)
    setPurchaseRecord((state) => state)
  }, [blance.current])
  const rechargeRecordColumns: TableProps['columns'] = [
    {
      title: '购买时间',
      align: 'center',
      key: 'purchaseTime',
      dataIndex: 'purchaseTime'
    },
    { title: '商品', align: 'center', key: 'product', dataIndex: 'product' },
    { title: '价格', align: 'center', key: 'price', dataIndex: 'price' }
  ]
  const purchaseRecordColumns: TableProps['columns'] = [
    { title: '类型', align: 'center', key: 'type', dataIndex: 'type' },
    { title: '金额', align: 'center', key: 'amount', dataIndex: 'amonut' },
    { title: '日期', align: 'center', key: 'date', dataIndex: 'date' }
  ]
  const getUpToNum = useCallback((num: number) => {
    // console.log("getNumber", num);
    blance.current = num
    // console.log("getNumbe blance", blance);
  }, [])
  const moneylist: AigcListType[] = [
    {
      title: '余额',
      field: 'balance',
      data: blance.current,
      input: true,
      buttonText: '充值',
      btnOnClick: (item: AigcListType) => {
        setModalopen(true)
      }
    }
  ]
  return (
    <>
      <AigcCard>
        <AigcList list={moneylist} />
      </AigcCard>
      <Card
        className="mt-[16px]"
        title={
          <div>
            <AigcIcon iconName="fenxiangzidongzhuanchu" />
            <span>购买记录</span>
          </div>
        }
      >
        <Table
          dataSource={purchaseRecord}
          columns={rechargeRecordColumns}
        ></Table>
      </Card>
      <Card
        className="mt-[16px]"
        title={
          <div>
            <AigcIcon iconName="fenxiangzidongzhuanru" />
            <span>充值记录</span>
          </div>
        }
      >
        <Table dataSource={rechargeRecord} columns={purchaseRecordColumns} />
      </Card>
      <TopUp
        open={modalOpen}
        onOk={async () => {
          // console.log('onOk',blance)
          await moneyDispatch(aigcUpto(blance.current))
          message.success('充值成功！')
          setModalopen(false)
        }}
        onCancel={(close) => {
          console.log(close)
          setModalopen(false)
        }}
        sourceData={blance.current}
        getNumber={getUpToNum}
      />
    </>
  )
}
